@charset "utf-8";
@import "iconfont/iconfont.css";

html, body {min-width:1400px;font-family:"微软雅黑";}

* {margin:0;padding:0;}

a {
  &:hover {
    text-decoration:none;
  }
}

$color:#333 #666 #999 #f00;
$border-color:#dedede;
$font-color:(
    cfff:#fff,
    c333:#333,
    c666:#666,
    c999:#999,
    cf00:#f00,
    c905:#905b41,
    c717:#71706f,
    cffd:#ffd500
);
button, input, select {
  outline:none !important; box-shadow:none;
}

.container {width:975px;}

.fontB {font-weight:bold;}

.btn {cursor:pointer;

  &.btn-primary {
    background-color:#905b41;border-color:#905b41;color:#fff;
  }

  &.is-round {-webkit-border-radius:25px;-moz-border-radius:25px;border-radius:25px;}
}

.textI2 {text-indent:2em;}

.font25 {font-size:25px;}

.font35 {font-size:35px;}

@for $i from 1 through 50 {
  .blk#{$i * 5} {
    font-size:0;line-height:0;clear:both;overflow:hidden;
    height:$i*5 +px;
  }
  .mar-#{$i*5} {margin:$i*5 +px;}
  .ml-#{$i*5} {margin-left:$i*5 +px;}
  .mt-#{$i*5} {margin-top:$i*5 +px;}
  .mr-#{$i*5} {margin-right:$i*5 +px;}
  .mb-#{$i*5} {margin-bottom:$i*5 +px;}
  .pad-#{$i*5} {padding:$i*5 +px;}
  .pl-#{$i*5} {padding-left:$i*5 +px;}
  .pt-#{$i*5} {padding-top:$i*5 +px;}
  .pr-#{$i*5} {padding-right:$i*5 +px;}
  .pb-#{$i*5} {padding-bottom:$i*5 +px;}
  .font#{8+$i*2} {font-size:8+$i*2+px;}
  .lh#{10+$i*2} {line-height:10+$i*2+px;}
}

@each $i, $c in $font-color {
  .#{$i} {color:$c}
}

@for $i from 1 through 20 {
  .w#{$i*5} {width:$i*5 * 1%;}
}

.bdl {border-left:1px solid $border-color;}

.bdt {border-top:1px solid $border-color;}

.bdb {border-bottom:1px solid $border-color;}

.bdr {border-right:1px solid $border-color;}

.bda {border:1px solid $border-color;}

.bdl-d {border-left:1px dashed $border-color;}

.bdt-d {border-top:1px dashed $border-color;}

.bdb-d {border-bottom:1px dashed $border-color;}

.bdr-d {border-right:1px dashed $border-color;}

.bda-d {border:1px dashed $border-color;}

.div_vm, .iconfont {display:inline-block;vertical-align:middle;}

.header {
  width:975px;margin:0 auto;

  & .headerTop {
    padding-top:25px;height:80px;

    & .logo {
      float:left;width:202px;height:55px;background:url("../images/index_03.jpg") no-repeat center center;
    }

    & .headerSearch {
      float:left;width:420px;height:35px;margin:10px 50px;position:relative;

      & input {box-shadow:none;height:35px;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;position:absolute;left:0; top:0;z-index:1;padding-left:20px;padding-right:95px;}

      & button {-webkit-border-radius:0 15px 15px 0;-moz-border-radius:0 15px 15px 0;border-radius:0 15px 15px 0;height:35px;width:70px;position:absolute;right:0;top:0;z-index:2;background-color:#905b41;border-color:#905b41;color:#fff;}
    }

    & .headerLogin {
      float:right;height:55px;padding:10px 0;

      & .btn {
        height:35px;line-height:33px;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;
        padding-top:0;
        padding-bottom:0;float:right;margin-left:15px;
        &.register{
          background:url(../images/002.png) no-repeat 5px center;padding-left:35px;
        }
      }
      & .iconfont{float:right;margin-left:15px;width:35px;height:35px;line-height:35px;font-size:35px;}
    }
  }

  & .menu {
    clear:both;height:80px;padding-top:30px;padding-bottom:25px;

    & > a {
      display:inline-block;color:#905b41;font-size:18px;margin-right:80px;position:relative;height:28px;line-height:28px;

      &:after {content:'';width:70%;height:2px;background:#905b41;position:absolute;left:50%;margin-left:-35%;bottom:-2px;display:none;}

      &.active {
        font-weight:bold;

        &:after {display:block;}
      }

      &:hover {
        text-decoration:none;
      }
    }
  }
}

.kefu {
  background:#f9f7f5;width:260px;position:fixed;top:35%;right:10px;z-index:9999;padding:25px 50px;box-shadow:0 0 5px #ccc;

  & .btn {
    height:48px;padding:0;line-height:48px;background-color:#905b41;border-color:#905b41;color:#fff;font-size:15px;

    &.is-plain {background-color:#fff;color:#905b41;}

    &.btn-img {
      position:relative;

      & img {
        position:absolute;left:50%;margin-left:-45px;bottom:-25px;
      }
    }
  }
}

.footer {
  background-image:url(../images/index_21.jpg); background-position:center center;-webkit-background-size:cover;background-size:cover; min-height:248px;background-repeat:no-repeat;

  & ul {
    float:left;width:400px;padding-left:130px;padding-top:75px;

    & li {
      line-height:45px;font-size:16px;list-style:none;

      & i {font-size:22px;margin-right:5px;}
    }
  }

  & .footerQrcode {
    float:left;width:160px;padding-top:85px;margin-left:30px;text-align:center;

    & img {width:110px;height:110px;}

    & > span {display:block;line-height:28px;font-size:12px;}
  }
}

.banner01 {
  width:100%;min-height:427px;background-image:url(../images/index_06.jpg);background-position:center center;background-repeat:no-repeat;-webkit-background-size:cover;background-size:cover;
}

.banner02 {
  width:100%;min-height:500px;background-image:url(../images/about_03.jpg);background-position:center center;background-repeat:no-repeat;-webkit-background-size:cover;background-size:cover;
}

.thumbnail {border:none;}

.more {
  position:relative;padding-right:25px; color:#666;font-size:14px;line-height:28px;

  &:before {content:'\e6fb';font-family:iconfont;display:block;position:absolute;right:0;top:0;color:#999;}

  &.min {
    font-size:14px;padding-right:20px;

    &:before {font-size:14px;top:-4px;}
  }
}

.title01 {
  height:28px;position:relative;margin:25px -15px;

  &:after {content:'';width:5px;height:28px;background:#905b41;display:block;position:absolute;left:0;top:0;}

  & > span {
    display:inline-block;float:left;color:#905b41;font-size:28px;line-height:24px;font-weight:bold;padding-left:15px;
  }

  & > a {float:right;}
}

.LivePlay {
  height:280px;margin:0 -15px;

  & .livePlayImg {
    float:left;width:500px;height:280px;position:relative;

    & > img {
      width:500px;height:280px;position:absolute;left:0;top:0;z-index:1;
    }

    & > .imgTitle {
      width:500px;height:65px;background:rgba(0, 0, 0, .5);position:absolute;left:0;bottom:0;z-index:2;padding:7.5px 15px;color:#fff;

      & .pull-left {
        & b {font-size:20px;line-height:25px;display:block;padding-top:3px;}

        & span {display:block;line-height:20px;font-size:14px;}
      }

      & .pull-right {
        width:150px;height:50px;background-color:#905b41;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;text-align:center;

        & b {font-size:16px;line-height:20px;display:block;padding-top:8px;}

        & span {display:block;font-size:12px;line-height:18px;}
      }
    }
  }

  & .LivePlayList {
    float:right;width:475px;height:280px;background-color:#eee;position:relative;

    &:after {content:'';width:1px;height:280px;border-left:1px dashed #cfcfcf;position:absolute;left:40px;top:0;}

    & .livePlayCon {
      width:475px;height:200px;padding:30px 15px 30px 65px;line-height:34px;font-size:14px;text-indent:2em;
    }

    & > dl {
      position:relative;z-index:10;height:80px;margin-bottom:0;

      & > dd {
        height:40px;line-height:40px;padding-left:32px;position:relative;

        &:after {content:'';width:5px;height:40px;background:#905b41;position:absolute;left:0;top:0;display:none;}

        & > a {font-size:14px;color:#666;}

        &.active {
          background-color:#fff;color:#905b41;box-shadow:0 0 5px #ccc;

          & > a {color:#905b41;}

          &:after {display:block;}

          & .c999 {color:#905b41;}
        }
      }
    }
  }
}

.recordWrap {
  clear:both;margin:0 -15px;

  & .recordLeft {
    float:left;width:665px;

    & .recordItem {
      float:left;width:310px;height:310px;margin-right:22.5px;margin-bottom:20px;background:#f0f0f0;

      & .recordImg {
        width:310px;height:215px;overflow:hidden;

        & > a {
          width:360px;height:250px;display:block;position:relative;

          &:after {content:'\e603';font-family:iconfont;width:50px;height:50px;display:block;position:absolute;left:50%;margin-left:-25px;top:50%;margin-top:-25px;z-index:2;color:#905b41;font-size:60px;background:#fff;line-height:50px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;text-align:center;text-indent:-4px;}

          & img {max-width:360px;max-height:250px;position:absolute;left:0;top:0;z-index:1;}
        }
      }

      & .recordInfo {
        padding:10px 15px;

        & .money {
          height:26px;line-height:26px;color:#fff;display:inline-block;padding:0 15px;background:#905b41;

          & .font25 {font-size:25px;}
        }
      }
    }
  }

  & .recordRight {
    float:right;width:310px;background:#f9f7f5;padding:20px;height:640px;

    & > dl {
      & > dt {font-size:25px;display:block;color:#905b41;height:60px;line-height:60px;text-align:center;font-weight:500;}

      & > dd {
        height:36px;

        & > a {
          color:#71706f;

          & .iconfont {font-size:12px;}

          & > span {line-height:36px;font-size:12px;display:inline-block;vertical-align:middle;}
        }

        &:nth-of-type(1) {
          & > a {
            color:#905b41;

            & .iconfont {font-size:18px;}

            & > span {font-size:18px;font-weight:bold;}
          }
        }

        &:nth-of-type(2) {
          & > a {
            color:#733719;

            & .iconfont {font-size:16px;}

            & > span {font-size:16px;font-weight:bold;}
          }
        }

        &:nth-of-type(3) {
          & > a {
            color:#000;

            & .iconfont {font-size:14px;}

            & > span {font-size:14px;font-weight:bold;}
          }
        }
      }
    }
  }
}

.aboutTitle {
  text-align:center;clear:both;margin:80px 0;

  & > span {
    background:#905b41;color:#fff;line-height:65px;font-size:34px;font-weight:bold;padding:0 55px;display:inline-block;
  }
}

.aboutHonor {
  font-size:16px;line-height:40px;
}

.login {
  width:100%;background-image:url(../images/login_02.jpg);background-position:center center;background-repeat:no-repeat;-webkit-background-size:cover;background-size:cover;min-height:785px;

  & .loginBox {
    width:336px;height:369px;background-image:url(../images/login_01.png);background-repeat:no-repeat;padding:15px 37px 0 37px;margin:17% -15px 0 auto;

    & .form-group {
      margin-bottom:35px;

      & input {
        height:44px;padding:12px 25px;-webkit-border-radius:25px;-moz-border-radius:25px;border-radius:25px;
      }

      & .btn.is-round {letter-spacing:30px; font-size:18px;height:44px;line-height:1;text-indent:30px;}

      &.form-code {
        position:relative;

        & input {padding-right:115px;}

        & button {
          position:absolute;right:20px;top:5px;z-index:20;
        }
      }
    }

  }
}

.attend {
  width:1550px;margin:0 auto;

  & > h1 {
    font-size:40px;line-height:60px;color:#905b41;font-weight:bold;
  }

  & .videoBox {
    clear:both;height:660px;

    & .videoPlay {
      float:left;width:1160px;height:660px;overflow:hidden;background:#000;
    }

    & .videoInfo {
      float:right;width:390px;height:660px;background-color:#eee;position:relative;padding:20px 0;overflow:hidden;

      &:after {content:'';width:1px;height:660px;border-left:1px dashed #cfcfcf;position:absolute;left:45px;bottom:20px;}

      & .livePlayCon {
        height:340px;padding:35px 15px 15px 15px;line-height:39px;font-size:18px;text-indent:2em;background-color:#eee;z-index:10;position:absolute;left:0;top:0;
      }

      & > dl {
        position:relative;z-index:10;margin-top:320px;

        & > dd {
          height:50px;line-height:50px;padding-left:38px;position:relative;

          &:after {content:'';width:5px;height:50px;background:#905b41;position:absolute;left:0;top:0;display:none;}

          & > a {font-size:18px;color:#666;}

          &.active {
            background-color:#fff;color:#905b41;box-shadow:0 0 5px #ccc;

            & > a {color:#905b41;}

            &:after {display:block;}

            & .c999 {color:#905b41;}
          }
        }
      }
    }
  }

  & .message {
    width:1160px;clear:both;

    & textarea {border:1px solid #905b41;resize:none;}

    & .tabs {
      height:53px;border-bottom:3px solid #905b41;margin-top:40px;margin-bottom:35px;

      & > span {display:inline-block;line-height:50px;font-size:20px;margin-left:50px;}

      & > a {
        display:inline-block;font-size:25px;color:#905b41;line-height:50px;padding:0 20px;

        &.active {
          background:#905b41;color:#fff;
        }
      }
    }

    & .media-list {
      border-bottom:1px solid #dedede;margin-bottom:25px;padding-bottom:10px;

      &:last-of-type {border:none;}

      & .media-left {
        padding-right:20px;

        & img {width:80px;height:80px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}
      }
    }
  }
}

.courseTabs {
  height:60px;border-top:4px solid #905b41;margin:20px -15px;

  & > a {
    display:inline-block;float:left;width:25%;height:60px;text-align:center;font-size:22px;color:#fff;background:#905b41;line-height:60px;border-right:2px solid #fff;

    &:last-of-type {border-right:none;}

    &.active {background:#fff;color:#905b41;}
  }
}

.courseList {
  & .recordItem {
    height:310px; background:#f0f0f0;margin:0 -5px 30px -5px;

    & .recordImg {
      height:215px;

      & > a {
        height:215px;display:block;position:relative;

        &:after {content:'\e603';font-family:iconfont;width:40px;height:40px;display:block;position:absolute;left:50%;margin-left:-20px;top:50%;margin-top:-20px;z-index:2;color:#905b41;font-size:50px;background:#fff;line-height:40px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;text-align:center;text-indent:-4px;}

        & img {position:absolute;left:0;top:0;z-index:1;}
      }
    }

    &.vip {
      & .recordImg a {
        &:before {
          content:'';background:url(../images/006.png) no-repeat 0 0;width:98px;height:98px;display:block;position:absolute;right:0;top:0;z-index:100;
        }
      }
    }

    &.hot {
      & .recordImg a {
        &:before {
          content:'';background:url(../images/006.png) no-repeat -98px 0;width:98px;height:98px;display:block;position:absolute;right:0;top:0;z-index:100;
        }
      }
    }

    & .recordInfo {
      padding:15px;

      & .money {
        height:26px;line-height:26px;color:#fff;display:inline-block;padding:0 15px;background:#905b41;
      }
    }
  }
}

.userBox {
  -webkit-border-radius:25px;-moz-border-radius:25px;border-radius:25px;box-shadow:0 0 15px #ccc;background:url(../images/004.jpg) repeat-y 0 0;

  .userLeft {
    float:left;width:255px;padding:45px 0;

    & .userInfo {
      width:200px;margin:auto;text-align:center;

      & > img {
        width:160px;height:160px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;margin:0 auto;
      }

      & > span {display:block;font-size:22px;line-height:40px;margin-top:10px;}

      & > p {display:block;font-size:22px;line-height:30px;color:#71706f;margin-bottom:30px;}
    }

    & > ul {
      & > li {
        list-style:none;height:80px;line-height:80px;padding-left:55px;

        & > a {
          color:#767474;

          & > .iconfont {font-size:30px;}

          & > span {line-height:80px;font-size:20px;display:inline-block;vertical-align:middle;margin-left:10px;}
        }

        &.active {
          background:#fff;

          & > a {color:#905b41;}
        }
      }
    }
  }

  .userRight {
    float:right;width:720px;padding:50px 30px;
  }
}

.userVipTab {
  border-bottom:5px solid #905b41;height:63px;margin-bottom:20px;

  & > a {
    display:block;float:left;width:50%;text-align:center;line-height:58px;font-size:20px;color:#71706f;

    &.active {
      background:#905b41;color:#fff;
    }
  }
}

.userVipList {
  & .media {
    background:#905b41;padding:25px;color:#fff;

    & .media-left {padding-right:25px;}

    & .media-body {
      position:relative;

      & > a {
        width:150px;height:45px;line-height:45px;background:#fffef3;color:#905b41;text-align:center;position:absolute;right:20px;top:50%;margin-top:-25px;font-size:20px;letter-spacing:10px;text-indent:10px;
      }
    }
  }
}

.Recharge {
  width:185px;height:120px;border:1px solid #905b41;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;text-align:center;color:#905b41;margin-bottom:30px;

  & input {-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border:none;margin:15px 0;font-size:20px;text-align:center;}
}

.btn-max {height:65px;font-size:28px;font-weight:500;padding-left:35px;padding-right:35px;letter-spacing:10px;text-indent:10px;}

.userForm {
  & .form-group {
    margin-bottom:40px;

    & .control-label {
      font-size:18px;color:#71706f;font-weight:500;
    }

    & .form-control {
      font-size:18px;padding-top:14px;padding-bottom:14px;height:40px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border-left:none;border-top:none;border-right:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;
    }

    & .checkbox {
      font-size:18px;color:#71706f;
    }

    & .btn-code {position:absolute;right:15px;top:0;}
  }
}

.myCourseTab {
  height:63px;border-bottom:5px solid #905b41;margin-bottom:20px;

  & > li {
    float:none;

    & > a {
      display:block;float:left;width:25%;height:58px;line-height:58px;text-align:center;font-size:20px;color:#71706f;margin-right:0;padding:0;border:none;

      &:hover {background:none;}
    }

    &.active {
      & > a {
        background:#905b41 !important;color:#fff !important;font-weight:bold;border-color:#905b41;
      }
    }
  }
}

.myCourseList {
  & .recordItem {
    height:215px; background:#f0f0f0;margin:0 -5px 30px -5px;

    & .recordImg {
      height:145px;

      & > a {
        height:145px;display:block;position:relative;

        &:after {content:'\e603';font-family:iconfont;width:30px;height:30px;display:block;position:absolute;left:50%;margin-left:-15px;top:50%;margin-top:-15px;z-index:2;color:#905b41;font-size:40px;background:#fff;line-height:30px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;text-align:center;text-indent:-4px;}

        & img {position:absolute;left:0;top:0;z-index:1;}
      }
    }

    &.vip {
      & .recordImg a {
        &:before {
          content:'';background:url(../images/007.png) no-repeat 0 0;width:65px;height:65px;display:block;position:absolute;right:0;top:0;z-index:100;
        }
      }
    }

    &.hot {
      & .recordImg a {
        &:before {
          content:'';background:url(../images/007.png) no-repeat -65px 0;width:65px;height:65px;display:block;position:absolute;right:0;top:0;z-index:100;
        }
      }
    }

    & .recordInfo {
      padding:10px 15px;height:70px;

      & .money {
        height:20px;line-height:20px;color:#fff;display:inline-block;padding:0 10px;background:#905b41;
      }
    }
  }
}

.jsCourseList {
  & .recordItem {
    background:#f0f0f0;margin:0 -5px 30px -5px;
    &:after{content:'';width:100%;display:block;height:0;clear:both;}

    & .recordImg {
      height:145px;

      & > a {
        height:145px;display:block;position:relative;

        &:after {content:'\e603';font-family:iconfont;width:30px;height:30px;display:block;position:absolute;left:50%;margin-left:-15px;top:50%;margin-top:-15px;z-index:2;color:#905b41;font-size:40px;background:#fff;line-height:30px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;text-align:center;text-indent:-4px;}

        & img {position:absolute;left:0;top:0;z-index:1;}
      }
    }

    & .recordInfo {
      padding:10px 15px;
      &:after{content:'';width:100%;display:block;height:0;clear:both;}
      & .money {
        height:26px;line-height:26px;color:#fff;display:inline-block;padding:0 10px;background:#905b41;
      }
    }
  }
}

.rechargeRecord {
  & > .rechargeRecordLeft {
    display:block;float:left;width:50%;text-align:center;

    & > .rechargeRecordTitle {
      font-size:28px;font-weight:bold;color:#905b41;height:91px;line-height:85px;border-bottom:6px solid #905b41;position:relative;margin-bottom:20px;
    }

    & > .rechargeRecordItem {
      height:80px;line-height:80px;position:relative;color:#a3a3a3;
    }

    &.bdx {
      & > .rechargeRecordTitle {
        &:before {content:'';width:2px;height:65px;background:#000;display:block;position:absolute;right:0;top:10px;}
      }

      & > .rechargeRecordItem {
        &:before {content:'';width:2px;height:80px;background:#000;display:block;position:absolute;right:0;top:0; }
      }
    }
  }
}

.custom-tabs {
  & > li {
    width:50%;margin-bottom:0;border-bottom:5px solid #905b41;

    & > a {
      height:58px;font-size:20px;color:#666;border:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;text-align:center;margin-right:0;

      &:hover {border:none;}
    }

    &.active {
      & > a {
        background-color:#905b41;color:#fff !important;border:none;

        &:hover, &:focus {
          background-color:#905b41;color:#fff !important;border:none;
        }
      }
    }
  }
}
